<template>
	<view class="home">
		<view class="lll" @click="clickBg" v-show="more"></view>
		<view class="bg">
			<view style="height: 165px;background-color: #fff;"></view>
			<view class="home-top">
				<view class="head-portrait">
					<image :src="this.users.portrait" class="head-portraits" @click="clickPersonalPage"/>
				</view>
				<view class="only3" v-show="iconModular == 3">
					<view class="name3">{{this.users.petName}}</view>
					<view class="jianjie3">{{this.users.briefIntroduction}}</view>
				</view>
				<view class="top-input" v-show="iconModular !== 3">
					<view class="iconfont iconsousuo"></view>
					<input />
				</view>
				<view class="top-input3" v-show="iconModular == 3">
					<view class="iconfont iconshezhi" @touchstart="touchstartShezhi(1)" @touchend="touchendIcon" :style="{color:(iconColor == 1 ? '#FE6440' : 'black')}"></view>
					<view class="iconfont iconrichscan_icon" @touchstart="touchstartSaoyisao(2)" @touchend="touchendIcon" :style="{color:(iconColor == 2 ? '#FE6440' : 'black')}"></view>
					<view class="iconfont iconjiahaoyou" @touchstart="touchstartJiahaoyou(3)" @touchend="touchendIcon" :style="{color:(iconColor == 3 ? '#FE6440' : 'black')}"></view>
				</view>
			</view>
			<view class="content-top">
				<text class="content-top-span" v-show="iconModular == 1">首页</text>
				<text class="content-top-span" v-show="iconModular == 2">板块</text>
				<text class="content-top-span" v-show="iconModular == 3">我</text>
				<view class="content-top-icon">
					<view class="iconfont iconjinbi" @touchstart="touchstartJinbi(4)" @touchend="touchendIcon" :style="{color:(iconColor == 4 ? '#FE6440' : 'black')}"></view>
					<view class="iconfont iconlingdang" @touchstart="touchstartLingdang(5)" @touchend="touchendIcon" :style="{color:(iconColor == 5 ? '#FE6440' : 'black')}"></view>
				</view>
			</view>
			<home v-show="iconModular == 1"></home>
			<plate v-show="iconModular == 2"></plate>
			<me v-show="iconModular == 3" class="me" :isTop="isTop"></me>
			<view class="home-section1" v-show="open">
				<view class="iconfont iconarrow arrow1" @click="clickOpen" style="transform:rotate(270deg);"></view>
				<view class="home-section-iconfont" style="margin-left: 25px;">
					<view class="iconfont iconhome" :class="iconSmall == 1 ? 'iconFontsize' : '' " :style="iconModular == 1 ? 'color: black' : ''" @touchstart="touchstartModular(1)" @touchend="touchendModular"></view>
				</view>
				<view class="home-section-iconfont">
					<view class="iconfont iconxingqiu-" :class="iconSmall == 2 ? 'iconFontsize' : ''" :style="iconModular == 2 ? 'color: black' : ''" @touchstart="touchstartModular(2)" @touchend="touchendModular"></view>
				</view>
				<view class="home-section-iconfont">
					<view class="iconfont iconwode" :class="iconSmall == 3 ? 'iconFontsize' : ''" :style="iconModular == 3 ? 'color: black' : ''" @touchstart="touchstartModular(3)" @touchend="touchendModular"></view>
				</view>
				<view class="icons" @click="clickMore">
					<view class="iconfont iconshizijia" v-show="more == false"></view>
					<view class="iconfont iconweibiaoti29" v-show="more == true"></view>
				</view>
				<view class="moremore" v-show="more == true">
					<view class="more-wai" v-show="moreColor == 1">
					</view>
					<view class="more-wai" style="top: 40px;" v-show="moreColor == 2">
					</view>
					<view class="more-wai" style="top: 80px;" v-show="moreColor == 3">
					</view>
					<view class="more-wode" @touchstart="touchstartMoreColor(1)" @touchend="touchendMoreColor">
						<image src="../static/img/xie.png" class="more-image" />
						<view>写帖子</view>
					</view>
					<view class="more-wode" @touchstart="touchstartMoreColor(2)" @touchend="touchendMoreColor">
						<image src="../static/img/tu.png" class="more-image" />
						<view>图片</view>
					</view>
					<view class="more-wode" @touchstart="touchstartMoreColor(3)" @touchend="touchendMoreColor">
						<image src="../static/img/shipin.png" class="more-image" />
						<view>视频</view>
					</view>
					<image src="../static/img/sanjiao.png" class="more-sanjiao" />
				</view>
			</view>
			<view class="home-section2" v-show="!open">
				<view class="iconfont iconarrow" @click="clickOpen"></view>
				<view class="icons" @click="clickMore" style="margin-right: 4px;">
					<view class="iconfont iconshizijia" v-show="!more"></view>
					<view class="iconfont iconweibiaoti29" v-show="more"></view>
				</view>
				<view class="moremore" v-show="more">
						<view class="more-wai" v-show="moreColor == 1">
						</view>
						<view class="more-wai" style="top: 40px;" v-show="moreColor == 2">
						</view>
						<view class="more-wai" style="top: 80px;" v-show="moreColor == 3">
						</view>
						<view class="more-wode" @touchstart="touchstartMoreColor(1)" @touchend="touchendMoreColor">
							<image src="../static/img/xie.png" class="more-image" />
							<view>写帖子</view>
						</view>
						<view class="more-wode" @touchstart="touchstartMoreColor(2)" @touchend="touchendMoreColor">
							<image src="../static/img/tu.png" class="more-image" />
							<view>图片</view>
						</view>
						<view class="more-wode" @touchstart="touchstartMoreColor(3)" @touchend="touchendMoreColor">
							<image src="../static/img/shipin.png" class="more-image" />
							<view>视频</view>
						</view>
						<image src="../static/img/sanjiao.png" class="more-sanjiao" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Home from 'pages/home/Home'
import Plate from 'pages/plate/Plate'
import Me from 'pages/me/Me'
import app from '../App.vue'
import userInfo from './user.js'
import utils from '../utils/util.js'
export default{
	name: 'homePage',
	components: {
		Home,
		Plate,
		Me
	},
	data() {
		return{
			iconModular: 1,
			iconSmall: 0,
			more: false,
			moreColor: 0,
			iconColor: 0,
			open: true,
			isTop: 0,
			users: [],
			userId: ''
		}
	},
	onLoad() {
		let tokenList = utils.getStorageData("token");
		console.log(tokenList);
		this.$store.commit('setToken',tokenList.username);
		this.userId = this.$store.state.userId;
	},
	onShow() {
		this.users = utils.getStorageData(this.userId+'userInfo');
		console.log(this.users);
	},
	methods: {
		touchstartModular(e) {
			this.iconModular = e;
			this.iconSmall = e;
			this.more = false;
		},
		touchendModular() {
			this.iconSmall = 0;
		},
		touchstartJinbi(e) {
			this.iconColor = e;
		},
		clickPersonalPage() {
			uni.navigateTo({
				url: './personalPage/PersonalPage',
				success() {
					console.log('ok');
				}
			});
		},
		clickMore() {
			this.more = !this.more;
		},
		touchstartMoreColor(e) {
			this.moreColor = e;
		},
		touchendMoreColor() {
			this.moreColor = 0;
			this.more = !this.more;
		},
		clickBg() {
			this.more = false;
		},
		touchstartShezhi(e) {
			this.iconColor = e;
		},
		touchstartSaoyisao(e) {
			this.iconColor = e;
		},
		touchstartJiahaoyou(e) {
			this.iconColor = e
		},
		touchstartLingdang(e) {
			this.iconColor = e;
			// uni.clearStorage();
			// try {
			//     uni.clearStorageSync();
			// } catch (e) {
			//     // error
			// }
			uni.redirectTo({
				url: '/pages/login/Login'
			})
		},
		touchendIcon() {
			if(this.iconColor == 4)
			{
				uni.navigateTo({
					url: './pointSmall/PointSmall',
					success() {
						console.log('ok');
					}
				});
			}
			this.iconColor = 0;
		},
		clickOpen() {
			this.open = !this.open;
		}
	}
}
</script>

<style>
	.lll{
		background-color: rgb(0,0,0,0.5);
		position: absolute; 
	 	top: 0;
		left: 0;
		right: 0;
		bottom: -200px;
		z-index: 100;
	}
	.bg{
		height: 100000px;
	}
	.home-top{
		position: fixed;
		top: 0;
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		z-index: 99;
	}
	.head-portrait{
		height: 50px;
		width: 50px;
		border-radius: 50%;
		margin-left: 15px;
	}
	.head-portraits{
		height: 50px;
		width: 50px;
		border-radius: 50%;
	}
	.only3{
		height: 60px;
		width: 140px;
		margin-top: 30px;
	}
	.name3{
		color: #FE6440;
		font-size: 20px;
	}
	.jianjie3{
		margin-top: 6px;
		font-size: 12px;
	}
	.top-input{
		background-color: #EFEFEF;
		height: 35px;
		width: 100px;
		border-radius: 20px;
		margin-right: 20px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}
	.top-input3{
		height: 35px;
		width: 110px;
		margin-right: 20px;
		margin-bottom: 6px;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
	}
	.iconshezhi,.iconrichscan_icon,.iconjiahaoyou{
		font-size: 22px;
		font-weight: 600;
	}
	.iconsousuo{
		font-size: 18px;
	    margin-left: 15px;
		font-weight: 600;
		color: #666666;
	}
	.content-top{
		position: fixed;
		width: 100%;
		top: 70px;
		background-color: #fff;
		height: 45px;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		z-index: 99;
	}
	.content-top-icon{
		display: flex;
		width: 60px;
		display: flex;
		justify-content: space-between;
		margin-right: 20px;
	}
	.iconjinbi{
		font-size: 19px;
		font-weight: 600;
	}
	.iconlingdang{
		font-size: 22px;
		font-weight: 600;
	}
	.content-top-span{
		margin-left: 15px;
		font-size: 24px;
		font-weight: 600;
		letter-spacing: 6rpx;
	}
	.home-section1{
		background-color: #fff;
		height: 50px;
		width: 195px;
		position: fixed;
		bottom: 20px;
		right: 20px;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border: 2px solid rgb(239,239,239,1);
		z-index: 101;
	}
	.home-section-iconfont{
		width: 35px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.iconhome, .iconxingqiu-, .iconwode{
		font-size: 32px;
		font-weight: 600;
		color: #9C9C9C;
	}
	.icons{
		background-color: #FE6440;
		width: 35px;
		height: 35px;
		border-radius: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.iconshizijia{
		font-weight: 600;
		color: #fff;
		font-size: 14px;
	}
	.iconweibiaoti29 {
		color: #fff;
		font-size: 18px;
	}
	.iconFontsize{
		font-size: 28px;
	}
	.moremore{
		position: absolute;
		width: 110px;
		background-color: #363636;
		right: 0px;
		bottom: 60px;
		display: flex;
		flex-direction: column;
		border-radius: 5px;
	}
	.more-wai{
		background-color: rgb(0,0,0,0.3);
		height: 40px;
		width: 110px;
		position: absolute;
	}
	.more-wode{
		display: flex;
		font-size: 16px;
		height: 40px;
		align-items: center;
		color: #fff;
	}
	.more-wode > view {
		margin-left: 10px;
		width: 52px;
		letter-spacing: 1px;
	}
	.more-image{
		height: 18px;
		width: 23px;
		margin-left: 10px;
		margin-top: 4px;
	}
	.more-sanjiao{
		height: 30px;
		width: 25px;
		position: absolute;
		bottom: -18px;
		right: 8px;
	}
	.home-section2{
		background-color: #fff;
		height: 50px;
		width: 68px;
		position: fixed;
		bottom: 20px;
		right: 20px;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border: 2px solid rgb(239,239,239,1);
		z-index: 102;
	}
	.iconarrow{
		font-size: 35px;
		font-weight: 600;
		transform:rotate(90deg);
		position: absolute;
		left: -6px;
	}
</style>
